<template>
  <el-dialog
    title="抽题组卷"
    :visible.sync="topicDialogVisible"
    :close-on-press-escape="false"
    append-to-body
    width="50%"
  >
    <el-main style="display: flex; justify-content: space-around" class="kxy-pump-topic">
      <paper-cate ref="paperCate" v-if="paperCate" :setCurrent="setCurrent" :current="current" />
      <ul v-if="cateId">
        <li>
          <h5>单选题</h5>
          <div>
            <label for="oddSimple">
              简单
              <input
                id="oddSimple"
                v-model="form.odd_simple"
                type="number"
                @change="changeInput($event,'odd_simple')"
              />
              /{{getNum.simpleNumS}}
            </label>
            <label for="oddNormal">
              正常
              <input
                id="oddNormal"
                v-model="form.odd_normal"
                type="number"
                @change="changeInput($event,'odd_normal')"
              />
              /{{getNum.normalNumS}}
            </label>
            <label for="oddDifficult">
              困难
              <input
                id="oddDifficult"
                v-model="form.odd_hard"
                type="number"
                @change="changeInput($event,'odd_hard')"
              />
              /{{getNum.hardNumS}}
            </label>
          </div>
        </li>
        <li>
          <h5>多选题</h5>
          <div>
            <label for="manySimple">
              简单
              <input
                id="manySimple"
                v-model="form.many_simple"
                type="number"
                @change="changeInput($event,'many_simple')"
              />
              /{{getNum.simpleNumM}}
            </label>
            <label for="manyNormal">
              正常
              <input
                id="manyNormal"
                v-model="form.many_normal"
                type="number"
                @change="changeInput($event,'many_normal')"
              />
              /{{getNum.normalNumM}}
            </label>
            <label for="manyDifficult">
              困难
              <input
                id="manyDifficult"
                v-model="form.many_hard"
                type="number"
                @change="changeInput($event,'many_hard')"
              />
              /{{getNum.hardNumM}}
            </label>
          </div>
        </li>
        <li>
          <h5>判断题</h5>
          <div>
            <label for="JudgeSimple">
              简单
              <input
                id="JudgeSimple"
                v-model="form.judge_simple"
                type="number"
                @change="changeInput($event,'judge_simple')"
              />
              /{{getNum.simpleNumJ}}
            </label>
            <label for="JudgeNormal">
              正常
              <input
                id="JudgeNormal"
                v-model="form.judge_normal"
                type="number"
                @change="changeInput($event,'judge_normal')"
              />
              /{{getNum.normalNumJ}}
            </label>
            <label for="JudgeDifficult">
              困难
              <input
                id="JudgeDifficult"
                v-model="form.judge_hard"
                type="number"
                @change="changeInput($event,'judge_hard')"
              />
              /{{getNum.hardNumJ}}
            </label>
          </div>
        </li>
      </ul>
      <div v-else class="kxy-pump-topic-no-data">暂无数据，请选择分类后查看</div>
    </el-main>
    <el-footer style="height: auto">
      <div class="kxy-pump-topic-button-score">
        <h4>
          设置每题分数
          <span>（默认设置每题分数为1分）</span>
        </h4>
        <div>
          <label for="odd">
            单选
            <input id="odd" v-model="score.odd" type="number" @change="changeScore($event,'odd')" />
          </label>
          <label for="many">
            多选
            <input
              id="many"
              v-model="score.many"
              type="number"
              @change="changeScore($event,'many')"
            />
          </label>
          <label for="judge">
            判断
            <input
              id="judge"
              v-model="score.judge"
              type="number"
              @change="changeScore($event,'judge')"
            />
          </label>
          <label for="back">
            填空
            <input
              id="back"
              v-model="score.back"
              type="number"
              @change="changeScore($event,'back')"
            />
          </label>
        </div>
      </div>
      <div class="learn-drawer-range-box-buttons">
        <el-button type="danger" round @click="topicDialogVisible = false">关闭</el-button>
        <el-button type="primary" round @click="topicDialogVisible = false">选择</el-button>
      </div>
    </el-footer>
  </el-dialog>
</template>

<script>
import paperCate from "./../../views/modules/paper/papercate";

export default {
  name: "topic",
  data() {
    return {
      current: {},
      paperCate: false,
      topicDialogVisible: false,
      getNum: {
        hardNumJ: 0,
        hardNumM: 0,
        hardNumS: 0,
        normalNumJ: 0,
        normalNumM: 0,
        normalNumS: 0,
        simpleNumJ: 0,
        simpleNumM: 0,
        simpleNumS: 0
      },
      form: {
        odd_simple: 0,
        odd_normal: 0,
        odd_hard: 0,
        many_simple: 0,
        many_normal: 0,
        many_hard: 0,
        judge_simple: 0,
        judge_normal: 0,
        judge_hard: 0
      },
      cateId: null,
      topicNum: {},
      score: {
        odd: 1,
        many: 1,
        judge: 1,
        back: 1
      },
      allTopicNum: {}
    };
  },
  props: ["setTopic", "topic"],
  components: { paperCate },
  methods: {
    changeInput(e, name) {
      let _name = name.split("_");
      let _Json = {
        quesType: _name[0] === "odd" ? 1 : _name[0] === "many" ? 2 : 3,
        cateId: this.cateId,
        score: this.score[_name[0]]
      };
      _Json[`${_name[1]}Num`] = e.target.value;
      this.topicNum[_name[0]] = Object.assign(
        this.topicNum[_name[0]] || {},
        _Json
      );
      this.allTopicNum[this.cateId] = this.topicNum;
      this.setTopic(this.allTopicNum);
    },
    changeScore(e, name) {
      this.score[name] = e.target.value;
      for (let key in this.allTopicNum) {
        if (this.allTopicNum[key][name]) {
          this.allTopicNum[key][name].score = this.score[name];
        }
      }
      this.setTopic(this.allTopicNum);
    },
    setCurrent(data) {
      if (data.id) {
        this.cateId = data.id;
        this.$http({
          url: this.$http.adornUrl(
            `/exam-admin/ques/bank/getquescountbycateid`
          ),
          method: "post",
          data: { cateId: data.id }
        })
          .then(res => {
            this.topicNum = {};
            if (parseInt(res.code) === 200) {
              this.getNum = res.data;
              this.regain();
            } else {
              this.getNum = {
                hardNumJ: 0,
                hardNumM: 0,
                hardNumS: 0,
                normalNumJ: 0,
                normalNumM: 0,
                normalNumS: 0,
                simpleNumJ: 0,
                simpleNumM: 0,
                simpleNumS: 0
              };
            }
          })
          .catch(_ => {
            this.form = {
              odd_simple: 0,
              odd_normal: 0,
              odd_hard: 0,
              many_simple: 0,
              many_normal: 0,
              many_hard: 0,
              judge_simple: 0,
              judge_normal: 0,
              judge_hard: 0
            };
            this.getNum = {
              hardNumJ: 0,
              hardNumM: 0,
              hardNumS: 0,
              normalNumJ: 0,
              normalNumM: 0,
              normalNumS: 0,
              simpleNumJ: 0,
              simpleNumM: 0,
              simpleNumS: 0
            };
          });
      }
    },
    // 查询获取数据
    init(topicArr) {
      this.cateId = null;
      this.form = {
        odd_simple: 0,
        odd_normal: 0,
        odd_hard: 0,
        many_simple: 0,
        many_normal: 0,
        many_hard: 0,
        judge_simple: 0,
        judge_normal: 0,
        judge_hard: 0
      };

      this.topicDialogVisible = true;
      this.paperCate = true;
      this.$nextTick(_ => {
        this.$refs.paperCate.init();
      });
    },
    regain() {
      if (this.allTopicNum[this.cateId]) {
        this.topicNum = this.allTopicNum[this.cateId] || {};
        for (let key in this.form) {
          let _name = key.split("_");
          this.form[key] =
            this.topicNum[_name[0]] && this.topicNum[_name[0]][`${_name[1]}Num`]
              ? this.topicNum[_name[0]][`${_name[1]}Num`]
              : 0;
        }
      } else {
        this.form = {
          odd_simple: 0,
          odd_normal: 0,
          odd_hard: 0,
          many_simple: 0,
          many_normal: 0,
          many_hard: 0,
          judge_simple: 0,
          judge_normal: 0,
          judge_hard: 0
        };
      }
    },
    reset() {
      this.topicNum = {};
      this.allTopicNum = {};
      this.score = {
        odd: 1,
        many: 1,
        judge: 1,
        back: 1
      };
    }
  }
};
</script>

<style scoped lang="scss">
.kxy-pump-topic {
  .kxy-paper {
    padding: 10px;
    max-height: 300px;
    overflow: auto;
    border: 1px dashed #bfcbd9;
  }

  & > ul {
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      padding: 15px 0 0 50px;
      font-size: 12px;
      color: #333;

      &:first-of-type {
        padding-top: 0;
      }

      h5 {
        margin: 0;
        font-size: 14px;
        line-height: 2;
      }

      div {
        padding: 0 10px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        label {
          margin: 5px;
        }

        input {
          width: 100px;
          line-height: 1.3;
        }
      }
    }
  }

  .kxy-pump-topic-no-data {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.kxy-pump-topic-button-score {
  font-size: 13px;
  margin-bottom: 10px;
  border-bottom: 1px solid #909399;

  h4 {
    margin: 0;
    font-size: 14px;

    span {
      font-size: 12px;
      color: #999;
      font-weight: 300;
    }
  }

  div {
    padding: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    input {
      width: 100px;
    }
  }
}
</style>
